<template>
	<div class="food-item">
		<el-image :src="baseApi.getImageUrl(props.food.img)"></el-image>
		<section class="text">
			<div>
				<span class="label">类别：</span>
				<span class="value">{{props.food.type}}</span>
			</div>
			<div>
				<span class="label">名称：</span>
				<span class="value">{{props.food.name}}</span>
			</div>
			<div>
				<span class="label">单价：</span>
				<span class="value">{{(props.food.price / 100).toFixed(2)}}</span>
			</div>
			<div>
				<span class="label">是否清真：</span>
				<span class="value">{{props.food.isHalal ? '是' : '否'}}</span>
			</div>
		</section>
		<section v-if="props.showUpdate" class="btns">
			<el-button size="small" type="success" plain @click="props.update(props.food.id)">修改</el-button>
			<el-button size="small" type="danger" plain @click="props.del(props.food.id)">删除</el-button>
		</section>
	</div>
</template>

<script setup>
import baseApi from '@/api/baseapi'
const props = defineProps({
	food: {
		type: Object
	},
	update: {
		type: Function
	},
	del: {
		type: Function
	},
	showUpdate: {
		type: Boolean,
		default: () => true
	}
})
</script>

<style scoped lang="scss">
.food-item {
	display: flex;
	flex-direction: column;
	height: 400px;
	box-shadow: 1px 1px 20px #b8b8b8;
	.el-image {
		width: 100%;
	}
	.text, .btns {
		margin-top: 10px;
		padding: 0 30px;
	}
	.btns {
		display: flex;
		justify-content: space-between;
	}
}

</style>